<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img
        class="banner-img"
        :src="bannerImg"
      />
      <div class="banner-info">
        <div class="banner-tittle">{{this.sightName}}</div>
        <div class="banner-number">
          <span class="iconfont banner-icon">&#xe671;</span>{{this.gallaryImgs.length}}
        </div>
      </div>
    </div>
    <FadeAnimation><CommonGallary @close="handleGallaryClose" v-show="showGallary" :imgs="gallaryImgs"></CommonGallary></FadeAnimation>
  </div>
</template>

<script>
import CommonGallary from "@/common/gallary/Gallary.vue"
import FadeAnimation from "@/common/fade/FadeAnimation.vue"
export default {
  data() {
    return {
        showGallary:false,

    }
  },
  props:{
    sightName:String,
    bannerImg:String,
    gallaryImgs:Array
  },
  components: {
    CommonGallary: CommonGallary,
    FadeAnimation:FadeAnimation
  },
  methods:{
      handleBannerClick(){
          this.showGallary = true
      },
      handleGallaryClose(){
          this.showGallary = false
      }
  }
};
</script>

<style lang="stylus" scoped>
    .banner
        position relative
        overflow: hidden
        width 100%
        height: 0
        width: 100%
        padding-bottom: 55%
        .banner-img
            width 100%
            vertical-align top
        .banner-info
            display flex
            position absolute
            left 0
            right 0
            bottom 0
            line-height .6rem
            color #fff
            // background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
            .banner-tittle
                font-size .32rem
                padding 0 .2rem
                flex 1
            .banner-number
                margin-top .14rem
                padding 0 .4rem
                line-height .4rem
                height .32rem
                border-radius .2rem
                font-size .24rem
                background rgba(0,0,0 ,.8)
                .banner-icon
                    font-size .24rem
</style>
